import React from 'react'

/**
 * 受控组件，典型应用就是表单
 * 1 控制表单元素值的来源
 * 2 监听表单元素值的变化
 */


// 定义一个类组件
class App extends React.Component {

  constructor(props) {
    super(props)
    // 在类组件中定义表单状态数据
    this.state = {
       txt:'xx'
    }
  }
  
  // 控制表单元素值的变化（onChange属性）
  handleChange = (e) => {
    this.setState({
      txt: e.target.value
    })
  }

  render () {
    // 验证输入框属性和组件状态绑定一致
    console.log(this.state.txt)
    return (
      <div>
        {/* 控制表单元素值的来源（value属性） */}
        {/* 控制表单元素值的变化（onChange属性） */}
        <input type='text' value={this.state.txt} onChange={this.handleChange}></input>
      </div>
    )
  }

}

// 别忘了导出组件
export default App